<template>
	<view class="container">
		<view class="stats-container">
			<view class="stat-item">
				<text class="stat-value">{{activeDeviceCount}}</text>
				<text class="stat-label">可用设备</text>
			</view>
			<view class="stat-item">
				<text class="stat-value">{{inactiveDeviceCount}}</text>
				<text class="stat-label">非可用设备</text>
			</view>
			<view class="stat-item">
				<text class="stat-value">{{totalDeviceCount}}</text>
				<text class="stat-label">设备总数</text>
			</view>
		</view>

		<view v-if="stationData.length > 0">
			<view v-for="(group, index) in stationData" :key="index" class="group-container">
				<view class="group-header">
					<text class="alias">{{group.alias || '未知位置'}}</text>
					<view class="device-stats">
						<text>设备: {{group.deviceCount}}台</text>
					</view>
				</view>

				<view class="device-container">
					<view v-for="(device, dIdx) in group.devices" :key="dIdx" class="device-card">
						<view class="device-header">
							<text class="device-idx">桩索引: {{device.pile_idx}}</text>
							<text class="vehicle-count">车位数: {{device.vehicles.length}}</text>
						</view>
						<view>
							<button style="background-color: #f7a500" @click="toLock(device.pile_idx)">前往开锁</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-else class="empty-view">
			<text>暂无设备数据</text>
		</view>
	</view>
</template>

<script>
	import {
		getList
	} from '@/api/layout.js'

	export default {
		data() {
			return {
				stationData: [],
				activeDeviceCount: 0,
				inactiveDeviceCount: 0,
				totalDeviceCount: 0,
				station_id: 0
			}
		},
		methods: {
			async getStationInfo(id) {
				try {
					const res = await getList(id)
					console.log(res);
					if (res && res.data && Array.isArray(res.data)) {
						const aliasMap = {};
						let deviceTotal = 0;
						let activeDevices = 0;
						let inactiveDevices = 0;

						// 按别名分组
						res.data.forEach(item => {
							const alias = item.alias || '未命名位置';

							if (!aliasMap[alias]) {
								aliasMap[alias] = {
									alias: alias,
									devices: {}, // 按 pile_idx 分组
									deviceCount: 0,
									activeCount: 0,
									inactiveCount: 0
								}
							}

							const group = aliasMap[alias];

							// 按 pile_idx 分组
							const pileIdx = item.pile_idx || 0;
							if (!group.devices[pileIdx]) {
								group.devices[pileIdx] = {
									pile_idx: pileIdx,
									vehicles: [],
									activeCount: 0,
									inactiveCount: 0
								};
								
								// 统计设备总数
								group.deviceCount++;
								deviceTotal++;
								
								// 初始化设备为不可用
								inactiveDevices++;
							}

							const device = group.devices[pileIdx];

							// 添加车辆信息
							device.vehicles.push({
								id: item.id,
								status: item.status,
								hw_code: item.pile_hw_code,
								num: item.num
							});

							// 更新设备状态计数
							if (item.status === 'active') {
								// 首次激活的车辆标记设备为可用
								if (device.activeCount === 0) {
									activeDevices++;
									inactiveDevices--;
								}
								
								device.activeCount++;
								group.activeCount++;
							} else {
								device.inactiveCount++;
								group.inactiveCount++;
							}
						});

						// 将设备对象转换为数组
						Object.keys(aliasMap).forEach(alias => {
							const group = aliasMap[alias];
							group.devices = Object.values(group.devices);
						});

						this.stationData = Object.values(aliasMap);
						this.activeDeviceCount = activeDevices;
						this.inactiveDeviceCount = inactiveDevices;
						this.totalDeviceCount = deviceTotal;
						
					} else {
						uni.showToast({
							title: '数据格式异常',
							icon: 'none'
						})
					}
				} catch (e) {
					console.error('请求失败:', e);
					uni.showToast({
						title: '数据加载失败',
						icon: 'none'
					})
				}
			},
			
			toLock(pile_idx){
				uni.navigateTo({
					url:"/home-workbench/dispatch/lock?station_id="+this.station_id+"&pile_idx="+pile_idx
				})
			}
		},
		onLoad(option) {
			if (option && option.station_id) {
				this.getStationInfo(option.station_id)
				this.station_id = option.station_id;
			} else {
				uni.showToast({
					title: '缺少站点ID',
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		background-color: #f0f2f5;
		min-height: 100vh;
	}

	.stats-container {
		display: flex;
		justify-content: space-between;
		background: white;
		border-radius: 16rpx;
		padding: 20rpx 0;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.stat-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.stat-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #2b85e4;
		margin-bottom: 6rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: #999;
	}

	.group-container {
		background: white;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.group-header {
		padding: 24rpx 30rpx;
		background-color: #f8f9fa;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.alias {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.device-stats {
		display: flex;
		gap: 20rpx;
		font-size: 26rpx;
		color: #666;
	}

	.device-container {
		padding: 20rpx;
	}

	.device-card {
		padding: 24rpx;
		border-radius: 12rpx;
		background-color: #f8f9fa;
		margin-bottom: 20rpx;
		border-left: 6rpx solid #ddd;
	}

	.device-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		border-bottom: 1rpx dashed #e0e0e0;
	}

	.device-idx {
		font-size: 28rpx;
		font-weight: bold;
		color: #2c3e50;
	}

	.vehicle-count {
		font-size: 26rpx;
		color: #7f8c8d;
	}

	.vehicle-container {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
		margin-bottom: 10rpx;
	}

	.vehicle-item {
		padding: 12rpx 20rpx;
		border-radius: 8rpx;
		background-color: #e0e7ff;
		display: flex;
		align-items: center;
	}

	.status-active {
		background-color: #d1fae5;
	}

	.vehicle-label {
		font-size: 24rpx;
		color: #4b5563;
		margin-right: 10rpx;
	}

	.vehicle-status {
		font-size: 26rpx;
		font-weight: 500;
	}

	.vehicle-more {
		font-size: 24rpx;
		color: #888;
		text-align: right;
		padding-top: 10rpx;
	}

	.empty-view {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
		color: #999;
		font-size: 30rpx;
		background: white;
		border-radius: 16rpx;
	}
</style>